<!DOCTYPE html>
<html>
<style>
#container {
  width: 900px;
  height: 200px;
  position: relative;
  background: whilt;
}
#animate1 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:50px;
}
#animate2 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:150px;
}
#animate3 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:250px;
}
#animate4 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:350px;
}
#animate5 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:450px;
}
#animate6 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:550px;
}
#animate7 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:650px;
}
#animate8 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:750px;
}
#animate9 {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: yellow;
  top:50px;
  left:850px;
}
#animatelow {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: whilt;
  top:90px;
  left:-100px;
}
#animatehigh {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: whilt;
  top:90px;
  left:-100px;
}
#animatemid {
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: white;
  top:10px;
  left:-100px;
}
#A{
  visibility:visible;
  width: 10px;
  height: 20px;
  position: absolute;
  background-color: white;
  top:0px;
  left:0px;
}
</style>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
请输入需要数字（1~9的整数）: <input type="text" name="fname">
</form>


<p id="demo"></p>
<p><button onclick="pressinput()">提交</button>
<button onclick="searchlow()">标记low</button>
<button onclick="searchhigh()">标记high</button>
<button onclick="Calculationmid()">计算mid</button>
<button onclick="searchmid()">标记mid</button>
<button onclick="compare()">比较并结束这一轮</button>
<button onclick="Reset()">重置</button></p>
<meta charset="utf-8">
<div id ="container">
  <div id ="animate1">1</div>
  <div id ="animate2">2</div>
  <div id ="animate3">3</div>
  <div id ="animate4">4</div>
  <div id ="animate5">5</div>
  <div id ="animate6">6</div>
  <div id ="animate7">7</div>
  <div id ="animate8">8</div>
  <div id ="animate9">9</div>
  <div id ="animatelow">low</div>
  <div id ="animatehigh">high</div>
  <div id ="animatemid">mid</div>
</div>
<p id="demo"></p>
<p>mid的计算：int mid=low+(high-low)*((key-arr[low])/(arr[high]-arr[low]))</p>
<script>
var key;
var low=0;
var high=8;
var midNUM;
var mid=-1;
var arr = new Array()
arr[0] = 1
arr[1] = 2
arr[2] = 3
arr[3] = 4
arr[4] = 5
arr[5] = 6
arr[6] = 7
arr[7] = 8
arr[8] = 9


function pressinput() {
var NUM = document.forms["myForm"]["fname"].value;
if(NUM=="0"||NUM=="1"||NUM=="2"||NUM=="3"||NUM=="4"||NUM=="5"||NUM=="6"||NUM=="7"||NUM=="8"||NUM=="9"){
key=NUM;
alert("输入成功!");
}
else{alert("请输入正确数字（1~9的整数）"); 
}
 }
 
 function searchhigh(){
 var elem = document.getElementById("animatehigh");   
  var W = -10;
  var id = setInterval(frame, 5);
  function frame() {
    if (W == (high)*100+50) {
      clearInterval(id);
    } else {
      W++; 
      elem.style.left = W + "px"; 
    }
  }
 } 
 function searchlow(){
 var elem = document.getElementById("animatelow");   
  var W = 1000;
  var id = setInterval(frame, 5);
  function frame() {
    if (W == (low)*100+50) {
      clearInterval(id);
    } else {
      W--; 
      elem.style.left = W + "px"; 
    }
  }
}
 
 function Calculationmid(){
 mid=low+(high-low)*((key-arr[low])/(arr[high]-arr[low]));
 var midtext="mid=";
 midtext=midtext+mid;
 document.getElementById("demo").innerHTML = midtext;
 }
 
 function searchmid(){
 var elem = document.getElementById("animatemid");   
  var W = -100;
  var id = setInterval(frame, 5);
  function frame() {
    if (W == (mid)*100+50) {
      clearInterval(id);
    } else {
      W++; 
      elem.style.left = W + "px"; 
    }
  }
}
function compare(){
    if(mid==-1){
	alert("请输入需要查找的数字（1~9的整数）");
	}
    else if (arr[mid]==key){
	document.getElementById("demo").innerHTML = "已经找到，是目前mid位置:"+mid;
	}else if (arr[mid]>key){
	high=mid-1;
	}else if(arr[mid]<key){
	low=mid+1;
	}
}

function Reset(){
high=8;
low=0;
mid=-1;
}
</script>

</body>
</html>


